﻿<!-- 主题文件 -->
<link rel="stylesheet" href="/incs/codemirror/theme/3024-night.css">
<!-- 引入CodeMirror核心文件 -->
<link href="/incs/codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">
<link href="/incs/codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/incs/codemirror/lib/codemirror.js"></script>

<!-- 因为HTML混合语言依赖Javascript、XML、CSS语言支持，所以都要引入 -->
<script type="text/javascript" src="/incs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="/incs/codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="/incs/codemirror/mode/css/css.js"></script>
<script type="text/javascript" src="/incs/codemirror/mode/htmlmixed/htmlmixed.js"></script>

<!--groovy代码高亮-->
<script src="codemirror-5.31.0/mode/groovy/groovy.js"></script>

<!-- 下面分别为显示行数、括号匹配和全屏插件 -->
<script type="text/javascript" src="/incs/codemirror/addon/selection/active-line.js"></script>
<script type="text/javascript" src="/incs/codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="/incs/codemirror/addon/display/fullscreen.js"></script>
<style>
    .CodeMirror {
        border: 1px solid #999;
        font-size: 14px;
        line-height:1.5;
    }
</style>
<div class="main">
    <form class="form form-group-sm form ui-validForm" method="post">
        <div class="controls" style="padding-bottom:10px">
            <span>
                文件名：@ViewBag.Name
                &nbsp;&nbsp;
                编辑背景：
            </span><input type="checkbox" id="EditorBgBtn" /><span>黑色</span>
        </div>
        <div class="controls">
            <textarea id="content" name="content" spellcheck="false">@ViewBag.Content</textarea>
        </div>

        <div class="submit-footerbar">
            <label class="control-label"></label>
                <div class="controls">
                    <input type="hidden" id="name" name="name" value="@ViewBag.Name" class="form-control" style="width:200px;" readonly />
                    <input type="hidden" id="path" name="path" value="@ViewBag.Path" class="form-control" />
                    <button type="button" id="btnPost" class="btn   btn-primary ui-pagePost" data-custom-params="url:'@Url.ActionUrl()',callBack:'',beforeExecute:'SetValue'">提交</button>
                    <button type="button" class="btn btn-default ui-closeDialog">关闭</button>
                    <span class="help-block"></span>
                </div>
            </div>
    </form>

</div>
<script type="text/javascript">
    var winHeight = $(window).height();
    var notRead = "@ViewBag.NotRead";
    if (notRead == "true") {
        $("#content").val("您好，此文件格式被禁止编辑！");
        $("#btnPost").attr("disabled", "disabled");
    }
    var mixedMode = {
        name: "htmlmixed",
        scriptTypes: [{
            matches: /\/x-handlebars-template|\/x-mustache/i,
            mode: null
        },
        {
            matches: /(text|application)\/(x-)?vb(a|script)/i,
            mode: "vbscript"
            },
            {
                matches: /(text|application)\/(x-)?vb(a|script)/i,
                mode: "vbscript"
            }]
    };
    var editor = CodeMirror.fromTextArea(document.getElementById("content"), {
        mode: mixedMode,
        lineNumbers: true,     // 显示行数
        selectionPointer: true, //选择指针
        indentUnit: 4,         // 缩进单位为4
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true,   // 括号匹配
        mode: 'htmlmixed',     // HMTL混合模式
        lineWrapping: false,    // 自动换行
    });
    editor.setOption("extraKeys", {
        // Tab键换成4个空格
        Tab: function (cm) {
            var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
            cm.replaceSelection(spaces);
        },
        // F11键切换全屏
        "F11": function (cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        // Esc键退出全屏
        "Esc": function (cm) {
            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
    });
    editor.setSize('100%', (winHeight - 130) + "px");
    var $editorBgBtn = $("#EditorBgBtn");
    var codeEditorBg = GetLocalStorage("CodeEditorBg");
    function SetTheme()
    {
        var $this = $editorBgBtn;
        if ($this.prop("checked")) {
            editor.setOption("theme", "3024-night");
            SetLocalStorage("CodeEditorBg", "black");
        }
        else {
            editor.setOption("theme", "default");
            SetLocalStorage("CodeEditorBg", "default");
        }
    }
    $editorBgBtn.on("click", function () {
        SetTheme();
    });
    if (codeEditorBg == "black") {
        $editorBgBtn.prop("checked", true);
        SetTheme();
    }

    function SetValue()
    {
        $("#content").val(editor.getValue());
    }
</script>
